
<template>
<div class="bg">
<div class="home">
  <!-- 头部按钮 -->
  <div class="button2">
     <el-button @click="toAdd" type="primary">新增</el-button>
  <el-button @click="toPreview" type="primary">预览</el-button>
  </div>

  <!-- 表格 -->
  <el-table :data="arr" style="width: 100%">
    <el-table-column prop="id" label="序号" >
    </el-table-column>
    <el-table-column prop="name" label="轮播图名称">
    </el-table-column>
    <el-table-column prop="introduce" label="介绍" >
    </el-table-column>
        <el-table-column label="地址" >
      <template slot-scope="scope">
       <img :src=scope.row.url alt="" height="100px">
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button  type="text" size="small" @click="toEdit(scope.row)">编辑</el-button>
        <el-button type="text" size="small" @click="deleteHandler(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>



 <!-- 编辑新增页面-->
 <el-dialog :title="title" :visible.sync="visible">
      <el-form ref="carousel_form" :model="form" :rules="rules">
        <el-form-item label="轮播图名称" label-width="100px" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="轮播图介绍" label-width="100px" prop="introduce">
          <el-input v-model="form.introduce" type="textarea" />
        </el-form-item>
        <el-form-item label="轮播图上传" label-width="100px" prop="url" >
          <el-upload
            class="avatar-uploader"
            action="http://121.199.29.84:8001/file/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="form.url" :src="form.url" class="avatar" height="100px">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false">取 消</el-button>
        <el-button type="primary" size="small" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>


<!-- 大屏预览 -->
    <el-dialog title="大屏预览" :visible.sync="visible2" width="90%" >
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="item in arr" :key="item.url">
          <el-image :src="item.url" fit="contain" />
        </el-carousel-item>
      </el-carousel>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="visible2 = false">关 闭</el-button>
      </div>
    </el-dialog>




  </div>
</template>


<script>
import axios from '../../../utils/request.js'
import qs from 'querystring'
import _ from 'lodash'
  export default {
    data() {
      return {
        arr:[],
       loading: false,
         rules:{
          name: [{ required: true, message: '请输轮播图名称', trigger: 'blur' }],
        introduce: [{ required: true, message: '请输入轮播图介绍信息', trigger: 'blur' }],
        url: [{ required: true, message: '请上传轮播图', trigger: 'change' }],
         },
        visible: false,
      visible2: false,
      form:{}
      }
    },
    methods: {
      findAll(){
    //与后台交互
    axios.get("/carousel/findAll").then(res=>{
console.log(res)
  this.arr = res.data
    })
  },


  // 删除按钮功能
      deleteHandler(id){
       
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.get('/carousel/deleteById?id='+id).then(res=>{
        if(res.status === 200){
          this.findAll()
          this.$message({
            type:'success',
            message:'删除成功'
          })
        }else {
          alert(res.status)
        }
      })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      
    },


    
    toAdd(){
      this.$router.push({name:'consult_add'})
    },
     // 查询所有轮播图
    findAllCarousel() {
      this.loading = true
      axios.get('/carousel/findAll').then(res => {
        this.carousel = res.data
        
        this.loading = false
      })
    },
    // 图片成功上传回调
    handleAvatarSuccess(res, file) {
      if (res.status === 200) {
        this.$set(this.form, 'url', 'http://121.199.29.84:8888/group1/' + res.data.id)
      } else {
        this.$message({ type: 'error', message: '附件服务器异常！' })
      }
    },
    // 新增按钮
    toAdd() {
      this.title = '新增轮播图'
      this.form = {}
      this.visible = true
    },
    // 预览按钮
    toPreview() {
      this.visible2 = true
    },
    // 表单提交按钮
    submitForm() {
      this.$refs['carousel_form'].validate((valid) => {
        if (valid) {
          request.request({
            url: '/carousel/saveOrUpdate',
            method: 'post',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            data: qs.stringify(this.form)
          }).then(res => {
            this.findAllCarousel() // 重载数据
            this.visible = false // 关闭模态框
            this.$message.success(res.message) // 提示成功信息
          })
        } else {
          return false
        }
      })
    },
    // 修改
    toEdit(row) {
      this.form = {}
      this.form = _.clone(row)
      this.visible = true
    },
},
    created () {
    this.findAll()
  },
  }
</script>

<style >
.button2{
  padding: 0.5em;
  overflow: auto;
  
}
.home{
 
  background-color: #fff;
}
.bg{
  width: 100%;
  
  background-color: #f3f3f9;
 padding: 0.5em; 
}


.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>